<template>
    <view>
		<view style="display: flex;">
			<div class="class">
				<u-search
					input-align="center"
					height="70" 
					placeholder="搜索姓名、班级、公司、行业" 
					v-model="keyword" 
					action-text="搜索" 
					:animation="true" 
					search-icon-color="#999999"
					@custom="searchHistory()"
					margin="30rpx 20rpx"
					>
				</u-search>
			</div>
			<button class="button" @click="goFace">人脸识别</button>
			
		</view>
		
		<u-back-top
				:scroll-top="scrollTop" 
				icon="arrow-up" 
				:icon-style="iconStyle" 
				bottom="200" 
				:custom-style="customStyle" 
				tips="顶部" 
				top="1000">
		</u-back-top>
		
		<!-- 顶部导航栏 -->
		<view class="u-text-center" style="display: flex; margin-left: 20px;" u-m-p-20>
			<div style="width: 300rpx;">
				<u-dropdown ref="uDropdown" @open="open" title-size="27rpx" active-color="#193867">
					<u-dropdown-item v-model="value1" title="入学年份" :options="options1" @change="change1"></u-dropdown-item>
					<u-dropdown-item v-model="value2" title="行业领域" :options="options2" @change="change2" height="610px"></u-dropdown-item>
				</u-dropdown>
			</div>
			<div style="width: 400rpx; ">
				<view>
					<u-tabs
						font-size="27" 
						:list="sortList" 
						:bar-width="bar_width" 
						item-width="auto"
						@change="changeSort" 
						:is-scroll="false" 
						:current="currentSort"
						active-color="#193867"
						 >
					</u-tabs>
				</view>
			</div>
		</view>
		
	
				
		<!-- 校友列表 -->
		<view class="content" style="background-color: #f2f2f2;">

			<view class="center_box_bg" v-if="contentList" v-for="item in contentList" :key="item.id">
				<view class="profily" @click="user_info(item.openId)">
					<view class="base">
						<!-- 头像 -->
						<div>
							<!-- <image class="image" :src="item.headUrl"></image> -->
							<u-avatar v-if="item.sex==0" :src="item.headUrl" mode="circle" size='large' show-sex='true' sex-icon='woman'></u-avatar>
							<u-avatar v-else :src="item.headUrl" mode="circle" size='large' show-sex='true' sex-icon='man'></u-avatar>
						</div>
						<!-- 信息 -->
						<div style="margin-top: 10px;">
							<view>
								<text class="text1">{{item.realName}}</text>
								<text class="text2">{{item.majorClass}}</text>
								<text class="text2">{{item.liveCity.split('-')[0]}}</text>
							</view>
							
							<view style="margin-top: 20rpx;">
								<text class="text3">{{item.enterTime}}-{{item.graduateTime}}</text>
								<text v-if="item.identity == '就读'" class="text3" style="margin-left: 15rpx;">{{item.educationBackgroundName}}</text>
								<text v-else class="text3" style="margin-left: 15rpx; color: #f7aa6c;">教职工</text>
							</view>
							<view style="margin-top: 5rpx;">
								<text class="text3">{{item.workUnit}}</text>
								<text class="text3" style="margin-left: 15rpx;">{{item.position}}</text>
							</view>
							<view style="margin-top: 5rpx;">
								<text class="text3">{{item.occupationalName}}</text>
							</view>	
							
							<view class="text3">
								<!-- {{ $u.timeFrom(item.lastLoginTime, false) }} -->
								{{ getGraceDateBeforeNow(item.lastLoginTime) }} 活跃
							</view>
						</div>
						
					</view>			
				</view>
			</view>
			
			<!-- 到底了 -->
			<view style="display: flex; background-color: #f2f2f2;">
				<view class="" style="background: #c3c3c3; width: 140px; height: 3rpx; margin-top: 20px; margin-left: 40rpx;"></view>
				<view style="margin-top: 10px; margin-left: 5px; margin-right: 5px;">到底了</view>
				<view class="" style="background: #c3c3c3; width: 140px; height: 3rpx; margin-top: 20px;"></view>
			</view>
		</view>
		
		<!-- tabber -->
        <view class="content" @click="hideDrawer">
            <tabbar :pagePath="'pages/seach/seach'"></tabbar>
            <zl-down :isDownShow="isDownShow" @choseBtn="choseBtn"></zl-down>
        </view>
			
    </view>
</template>

<script>
    import zlDown from '../../components/zlDown/zlDown.vue'
    export default {
        components: {
            zlDown
        },
        data() {
            return {
                title: '我是找校友',
                isDownShow: false,
				keyword: '',
				sortList:[
					{name:'同级'},
					{name:'同行'},
					{name:'同城'},
					{name:'全部'},
				],
				currentSort: 3,
				value1: 100,
				value2: 100,
				options1: [{
						label: '全部入学年份',
						value: 0,
					},
					{
						label: '1970级以前',
						value: 1970,
					},
					{
						label: '70 ~ 79级',
						value: 1979,
					},
					{
						label: '80 ~ 89级',
						value: 1989,
					},
					{
						label: '90 ~ 99级',
						value: 1999,
					},
					{
						label: '00 ~ 09级',
						value: 2009,
					},
					{
						label: '10 ~ 19级',
						value: 2019,
					},
					{
						label: '2020级以后',
						value: 2020,
					}
				],
				options2: [
					{
						label: '全部行业领域',
						value: '',
					}
				], /* 行业 后端获取*/
				bar_width: 75,
				/* 返回顶部 */
				scrollTop: 0,
				customStyle:{
					backgroundColor: '#a0cfff',
					color: '#2979ff'
				},
				iconStyle: {
 					color: '#2979ff',
 					fontSize: '34rpx'
 				},
				
				contentList: [
					/* {
						id: '',
						username: '',
						sex: '',
						identity: '',
						birthday: '',
						liveCity: '',
						nativePlace: '',
						majorClass: '',
						enterTime: '',
						graduateTime: '',
						educationBackground: '',
						occupationalId: '',
						occupationalDescription: '',
						workUnit: '',
						position: '',
						phone: '',
						wechat: '',
						email: '',
						qq: '',
						showInformation: '',
						headUrl: '',
						openId: '',
						occupational: ''
					}
 */
				],
				params: {
					page: 1,
					size: 4
				}
            }
        }, 
		onLoad() {
			//#ifdef H5
			this.$u.toast("H5不支持此功能")
			//#endif
			
			// #ifdef MP
				if (!this.$u.utils.isLogin()) return
			// #endif
			
            uni.hideTabBar();
			this.getData();
			this.getOccupationalList();
        },
        methods: {
            onNavigationBarButtonTap() {
                this.isDownShow = !this.isDownShow
            },
            hideDrawer() { 
                if (this.isDownShow == true)
                    this.isDownShow = false
            },
            choseBtn(val) {
                this.isDownShow = true
                uni.showToast({
                    title:val.name
                })
            },
			// 时间显示优化 刚刚、几分钟前，几小时前，几个月前
			getGraceDateBeforeNow(dateTimeStr) {
				return getApp().getDateBeforeNow(dateTimeStr);
			},
			async searchHistory(value){
				const params = {
					keyWord: value
				} 
				// value自动接收输入框中的内容
				if (value == ''){
					//如果输入的值为空则加载所有的列表
					this.getData();
				}else {
					//先清空展示的数据
					this.contentList = [];
					//然后赋值数据
					// console.log(params.keyword);
					await this.$u.api.userSelect(params).then(res =>  {
						if(res.code!="200") {
							uni.showToast({
								icon:"none",
								title:"获取失败，请重试"
							})
						} else {
							 this.contentList = res.data
						}
					})
				}
			},
			
			//顶部导航栏
			changeSort(index){
				this.currentSort=index
				//下方选择导航栏 内部选择置空
				this.value1 = 100
				this.value2 = 100
				//协调俩个导航栏的常亮
				this.$refs.uDropdown.close();
				this.$refs.uDropdown.highlight(2);
				this.bar_width = 75
				// console.log(index);
				//重置params
				this.params = {
					page: 1,
					size: 10
				}
				if(index == 0) {
					this.params.enterTime = this.$store.state.vuex_user.enterTime
				} else if(index == 1) {
					this.params.occupationalId = this.$store.state.vuex_user.occupationalId
				} else if(index == 2) {
					this.params.liveCity = this.$store.state.vuex_user.liveCity
				}
				this.getData()
			},
			
			open(index) {
				//协调俩个导航栏的常亮
				this.currentSort = -1
				this.bar_width=0
				// console.log(index);
				this.params = {
					page: 1,
					size: 4
				}
				// 关闭原来的其他菜单的高亮，同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight(index);
			},
			//入学年份
			async change1(enterTime) {
				// console.log(enterTime);
				
				//下方选择导航栏 内部选择置空
				this.value2 = 100
				
				this.params.date = enterTime;
				await this.$u.api.userSelectBy(this.params).then(res =>  {
					if(res.code!="200") {
						uni.showToast({
							icon:"none",
							title:"获取失败，请重试"
						})
					} else if(this.params.page==1){
						this.contentList = res.data
					} else {
						 this.contentList = [...this.contentList, ...res.data]
					}
				})
				/* this.$refs.uDropdown.highlight(); */
			},
			async change2(occupationalId) {
				console.log("occupationalId==" + occupationalId);
				
				//下方选择导航栏 内部选择置空
				this.value1 = 100
				
				this.params.occupationalId = occupationalId;
				await this.$u.api.userSelectBy(this.params).then(res =>  {
					if(res.code!="200") {
						uni.showToast({
							icon:"none",
							title:"获取失败，请重试"
						})
					} else if(this.params.page==1){
						this.contentList = res.data
					} else {
						 this.contentList = [...this.contentList, ...res.data]
					}
				})
				//所选项高亮并关闭菜单
			/* 	this.$refs.uDropdown.highlight(); */
			},
			//获取数据
			async getData(){
				//重置商品数据
				/* this.loading = true //显示骨架屏 */
				// console.log("params" + this.params.page);
				console.log("this.params.date = " + this.params.date);
				console.log("this.params.occupationalId = " + this.params.occupationalId);
				console.log("this.params.liveCity = " + this.params.liveCity);
				await this.$u.api.userSelectBy(this.params).then(res =>  {
					console.log("找校友-列表",res.data);
					if(res.code!="200") {
						uni.showToast({
							icon:"none",
							title:"获取失败，请重试"
						})
					} else if(this.params.page==1){
						this.contentList = res.data
					} else {
						 this.contentList = [...this.contentList, ...res.data]
					}
				})
	
			},
			//获取行业列表
			async getOccupationalList() {
				const params = {
					page: 1,
					size: 100
				}
			 	const res = await this.$u.api.getOccupationalList(params);
				// console.log(res);
				this.options2 = [...this.options2, ...res.data]
				// console.log(this.options2);
			},
			
			onReachBottom() {
				//重新请求数据，带上分页参数
				this.params.page = this.params.page + 1
				this.getData()
			},
			//返回顶部
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			goFace() {
				uni.navigateTo({
					url: '/pages/seach/seach_face'
				})
			},
			user_info(openId) {
				uni.navigateTo({
					url: "/pages/seach/seach_info?id=" + openId,
				});
			}
			
        }
    }
</script>

<style lang="scss">
	
	.warp {
		padding: 10px;
	}
    .content {
        height:50vh;
		background-color: #f2f2f2;
    }
	.center_box_bg {
		background-color: #f2f2f2;
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			// height: 150px;
			display: flex;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding-left: 35upx;
			box-sizing: border-box;
			box-shadow: 0px 0px 5px #bebebe;
		}
	}
	.base {
		display: flex;
		// justify-content: space-between;//两端对齐
		// flex-wrap: wrap;//自动换行
		align-items: center;
		// border-bottom: 2px solid #F6F6F6; //下划线
		padding-bottom: 35upx;
		position: relative;
	/* 	.profily_header {
			height: 120upx;
			width: 120upx;
			background-image: url('../../static/my/header.jpg');
			background-size: 100%;
		} */
	
		/* text {
			margin-left: 20px;
			font-size: 30upx;
		} */
		
		.image {
			height: 120upx;
			width: 120upx;
			background-size: 100%;
			border-radius: 50px;
		}
		
		.text1 {
			margin-left: 50rpx;
			font-size: medium;
			font-weight: 600;
		}
		.text2 {
			font-size: 14px;
			margin-left: 20rpx;
			color: #193867;
		}
		.text3 {
			margin-top: 20rpx;
			margin-left: 50rpx;
			font-size: 13px;
			color: #cccccc;
		}

	}
	.button {
		background-color: #193867;
		margin-top: 16px;
		margin-right: 10px;
		color:white;
		width: 100px;
		height: 34px;
		border:0;
		font-size: 25rpx;
		color: #f2f2f2;
		border-radius: 30px;
	}
	.class {
		width: 300px;
	}

	
</style>